<template>
  <div id="app">



    <div id="title"><el-text style="color: #79bbff;">
        <el-icon style="vertical-align: middle">
          <svg t="1735884888506" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
            p-id="4434" width="200" height="200">
            <path
              d="M841 822c-0.7 0.6-69 55.2-207.2-3.8-163.5-69.7-288.8-1.7-294 1.2-12.2 6.8-16.6 22.2-9.8 34.4 6.8 12.2 22.2 16.6 34.4 9.8 1.1-0.6 108.6-58.9 249.5 1.2 54.7 23.3 101 31.2 138.8 31.2 77 0 118.1-32.9 120.6-35 10.8-8.9 12.3-24.9 3.3-35.6-8.9-10.8-24.8-12.3-35.6-3.4zM529.3 488.7c-9.9-9.9-25.9-9.9-35.8 0L370.9 611.3c7.5-51.4 63.7-153.6 171.2-261.1 64-64 132-115.9 191.5-146.1 54.9-27.9 89.6-30.1 99.8-20 24.9 24.9-28.7 153.8-166.1 291.3-51.9 51.9-106.4 95.8-157.7 127.1-11.9 7.3-15.7 22.9-8.4 34.8 7.3 11.9 22.9 15.7 34.8 8.4 54.7-33.4 112.4-79.9 167.1-134.6 67.7-67.7 122.9-140.3 155.5-204.4 47.1-92.7 31.8-137.3 10.7-158.5-21.1-21.1-65.8-36.4-158.5 10.7-64.1 32.6-136.7 87.8-204.4 155.5-119 119-211.6 266.9-180.3 341.8L142 840.2c-9.9 9.9-9.9 25.9 0 35.8 4.9 4.9 11.4 7.4 17.9 7.4s13-2.5 17.9-7.4l351.5-351.5c9.9-9.9 9.9-25.9 0-35.8z"
              fill="#79bbff" p-id="4435"></path>
          </svg>
        </el-icon>
        仓颉排课系统
      </el-text></div>
    <div class="login-wrapper">
      <div class="header">注册</div>
      <div class="form-wrapper">
        <!-- added these lines -->

        <!-- end of added lines -->
        <!-- <input type="text" name="userid" placeholder="账号:11位数字" class="input-item" v-model="userid" @blur="CheckUserid"> -->
        <div class="input-with-button">
          <input type="text" name="userName" placeholder="账号:邮箱" class="input-item" v-model="userName"
            @blur="CheckUserName">

          <el-button class="el_button" type="primary" @click="sendVerificationCode()"
            :disabled="flage_userName != 1">发送验证码</el-button>
        </div>

        <input type="password" name="passward" placeholder="8-16位密码包含字母和.*@_" class="input-item" v-model="passward"
          @blur="CheckPassward">
        <input type="text" name="nickName" placeholder="1-16位用户名" class="input-item" v-model="nickName">
        <div class="captcha-wrapper">
          <input type="text" name="checkcode" placeholder="验证码" class="input-item" v-model="checkcode"
            @blur="CheckCheckcode">
          <img :src="imgStr" alt="验证码" class="captcha-image" @click="getCaptcha">
        </div>
        <div class="captcha-wrapper">
          <input type="text" name="CODE" placeholder="邮箱验证码" class="input-item" v-model="code_">


        </div>
        <div class="btn" @click="Signup">
          注册</div>


      </div>
      <div class="msg">
        已有账号?
        <router-link to="/Login">登录</router-link>

      </div>
    </div>

    <!-- <div id="title_1">
      <el-text tag="mark">
        <el-icon style="vertical-align: middle">
          <svg t="1704813028811" class="icon" viewBox="0 0 1126 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
            p-id="6452" width="200" height="200">
            <path
              d="M1119.223717 473.967851l-21.390528-24.533103a23.727014 23.727014 0 0 1-5.841215-15.584361V264.583665c27.967736-17.36009 72.045543-31.624337-28.306527-74.954468C948.695293 142.654148 746.647673 64.229998 644.870346 22.675596c-0.490662-0.198601-8.913694-3.901931-9.345943-4.088851-76.204488-31.799573-109.698014-18.201225-171.357877 6.495431-104.557745 39.206234-278.041824 110.983081-397.377842 155.902023-91.578565 33.960823-86.017729 59.346742-1.448622 99.382428 126.602489 60.000958 369.491883 152.175328 423.196012 172.152283s92.454748 20.105461 146.591126-4.030438c51.636339-23.014386 137.32696-52.173731 354.398184-141.07702a23.727014 23.727014 0 0 1 32.710803 21.951285v102.992299a23.727014 23.727014 0 0 1-6.063181 15.841375l-23.750379 26.58921a23.727014 23.727014 0 0 0 1.343479 33.061275l43.049753 40.72495a23.727014 23.727014 0 0 0 31.857985 0.712628l48.201705-41.788051a23.727014 23.727014 0 0 0 2.348168-33.528572z"
              p-id="6453"></path>
            <path
              d="M941.019936 494.891082c-93.961781 36.367403-235.400956 91.321552-293.485996 111.999452-79.604075 28.329892-101.508631 18.072719-166.22929-1.460303-89.475728-27.009777-220.318939-82.302716-296.406603-108.728373a23.212988 23.212988 0 0 0-30.806567 21.939603v369.281599a23.212988 23.212988 0 0 0 11.098308 19.860131c42.757692 26.180325 204.594389 116.216809 408.09063 116.216809 188.916569 0 346.535909-89.954708 388.417419-116.193445a23.212988 23.212988 0 0 0 10.911389-19.684893v-371.501261a23.212988 23.212988 0 0 0-31.58929-21.729319z"
              p-id="6454"></path>
          </svg>

        </el-icon>
        </el-text>
    </div> -->
  </div>
</template>

<script>

</script>

<style src="../../style/quanju.css" scoped></style>

<style scoped>
* {
  margin: 0;
  padding: 0;
}


#app {
  height: 98vh;
  /* background-image: linear-gradient(to right, #95d475, #eebe77); */
  /* background-image: linear-gradient(to right, #95d475, #eebe77); */
  background-image: url(../../image/backgroud.png);

  background-size: cover;
  background-position: center;
  border-radius: 20px;
  min-width: 1300px;
  min-height: 800px;
  position: relative;
}

.login-wrapper {


  background-color: #fff;
  width: 358px;
  height: 630px;
  border-radius: 15px;
  padding: 0 50px;
  position: relative;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -70%);
}

.header {
  font-size: 38px;
  font-weight: bold;
  text-align: center;
  line-height: 160px;
  color: #79bbff;
}

.input-item {
  display: block;
  width: 100%;
  margin-bottom: 20px;
  border: 0;
  padding: 10px;
  border-bottom: 1px solid rgb(128, 125, 125);
  font-size: 15px;
  outline: none;
}

.input-item:placeholder {
  text-transform: uppercase;
}

.btn {
  text-align: center;
  padding: 10px;
  width: 100%;
  margin-top: 40px;
  /* background-image: linear-gradient(to right, #95d475, #eebe77); */

  /* background-color: rgb(147, 198, 192, 0.8); */

  border-radius: 20px;
  background-color: #79bbff99;
}

.msg {
  text-align: center;
  line-height: 88px;
  color: #79bbff;
}

a {
  text-decoration-line: none;
  color: #abc1ee;
}

.captcha-wrapper {
  display: flex;
  align-items: center;
}

.captcha-image {
  width: 100px;
  height: 40px;
  margin-left: 10px;
}

#title {
  color: #529b2e;
  margin: 0 auto;
  text-align: center;
  font-size: 400%;
  padding-top: 50px;
}

#title_1 {
  color: #fab6b6;
  margin: 0 auto;
  text-align: center;
  /* transform: translate(-50%, -90%); */


  position: absolute;
  bottom: 50px;
  left: 50%;
  transform: translateX(-50%);

}

.input-with-button {
  display: flex;
  align-items: center;
}

.input-with-button input {
  flex: 1;
  margin-right: 10px;
  /* 根据需要调整间距 */
}

.input-with-button .el_button {
  margin-bottom: 20px;
  margin-left: auto;
  /* 将按钮推到最右边 */
}

.input-with-button .el_button::after {
  clear: both;
  /* 将按钮推到最右边 */
}
</style>



<script>
  import { ref, watchEffect,onMounted } from 'vue';
  import { useRouter } from 'vue-router';
  import { ElMessage } from 'element-plus';
  import axiosInstance from '../../js/axiosself'
  import CheckCodeApi from '../../js/api/CheckCode'
 
  

  
  export default {
    name: 'LoginView',
    setup() {
      const userName = ref('');
      const nickName = ref('');
      const passward = ref('');
      const checkcode = ref('');
      const code_ = ref('');
      const imgStr = ref('');
      const timestamp = ref('');
  
      const flage_userName = ref('');
      const flage_nickName = ref('');
      const flage_checkcode = ref('');
      const flage_passward = ref('');
      const checkCodeId = ref('');
  
      const router = useRouter();

      onMounted(async () => {
        await getCaptcha();
      });
  
      const getCaptcha = async() => {
        // imgStr.value = `/api/base/unSafe/YZMcode?t=${timestamp.value}`;
        await CheckCodeApi.getCheckCode().then(res=>{
          imgStr.value = res.data.imgBaseCode;
          checkCodeId.value = res.data.id;
        })

        
        timestamp.value = Date.now();
        console.info('更新验证码请求了'+imgStr.value);
      };
  
      const CheckUserName = () => {
        const reg = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
        const isValid = reg.test(userName.value);
        if (!isValid) {
          flage_userName.value = 0; // 核验没有通过
          ElMessage.error('请输入正确的邮箱！');
        } else {
          // 根据响应结果，显示提示信息或错误信息
          axiosInstance.get(`/unSafe/checkUser?userName=${userName.value}`).then(res => {
            if (res.data.code === 0) {
              flage_userName.value = 0; // 核验未通过
              userName.value = '';
              ElMessage.error('账号已存在');
            } else {
              flage_userName.value = 1; // 核验通过
            }
          });
        }
      };
  
      // const CheckUserid = () => {
      //   const reg = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
      //   const isValid = reg.test(userid.value);
      //   if (!isValid) {
      //     flage_userid.value = 0; // 核验没有通过
      //     ElMessage.error('请输入正确的邮箱！');
      //   } else {
      //     // 根据响应结果，显示提示信息或错误信息
      //     axiosInstance.get(`/unSafe/checkUser?userid=${userid.value}`).then(res => {
      //       if (res.data.code === 0) {
      //         flage_userid.value = 0; // 核验未通过
      //         userid.value = '';
      //         ElMessage.error('账号已存在');
      //       } else {
      //         flage_userid.value = 1; // 核验通过
      //       }
      //     });
      //   }
      // };
  
      const CheckCheckcode = () => {
        const pattern = /^[0-9a-zA-Z]*$/;
        if (!checkcode.value.match(pattern)) {
          checkcode.value = '';
          ElMessage.error('请输入验证码!');
        } else {
          flage_checkcode.value = 1;
        }
      };
  
      const sendVerificationCode =()=>{
        axiosInstance.get(`/unSafe/sendEmail?email=${userName.value}`).then(res=>{
          if (res.data.code === 1) {
              ElMessage({
                 message: '发送成功！',
                 type: 'success',
                         });
            } else if (res.data.code === 0) {
              getCaptcha();
              ElMessage.error(res.data.msg);
            }
        })
      }
      const CheckPassward = () => {
        const pattern = /^(?=.*[a-zA-Z])(?=.*\d)(?=.*[@.$*])[A-Za-z\d@.$*]{8,16}$/;
        if (!passward.value.match(pattern)) {
          passward.value = '';
          flage_passward.value = 0;
          ElMessage.error('请输入不小于8位的字母数组加(_.@*)');
        } else {
          flage_passward.value = 1;
        }
      };
  
      const Signup = () => {
        if (flage_userName.value !== 1) {
          ElMessage.error('用户名格式有误!');
        } else if (flage_passward.value !== 1) {
          ElMessage.error('密码格式有误!');
        } else if (flage_checkcode.value !== 1) {
          ElMessage.error('验证码格式有误!');
        } else {
          axiosInstance.post(`/unSafe/registration`,

          {
            userName: userName.value,
            nickName: nickName.value,
            password: passward.value,
            checkCode: checkcode.value,
            checkCodeId: checkCodeId.value,
            emailCheckCode: code_.value,

          },
          {
            headers: {
              "Content-Type":"application/json"
            },
          }

          ).then(res => {
            if (res.data.code === 1) {
              ElMessage({
                 message: '注册成功！',
                 type: 'success',
                         });
                         router.push('/Login');
            } else if (res.data.code === 0) {
              getCaptcha();
              ElMessage.error(res.data.msg);
            }
          });
        }
      };
  
      // // 自动更新验证码
      // watchEffect(() => {
      //   getCaptcha();
      // });
  
      return {
        userName,
        nickName,
        passward,
        checkcode,
        imgStr,
        timestamp,
        flage_userName,
        flage_nickName,
        flage_checkcode,
        flage_passward,
        code_,
        getCaptcha,
        CheckUserName,
        CheckCheckcode,
        CheckPassward,
        Signup,
        sendVerificationCode,
      };
    },
  };
  </script>